<template>
  <div id="addOrder">
    <!--     头部-->
    <header>
      <div class="tms_top">万事达-TMS<span>客户端</span></div>
      <div class="divHeader">新增订单</div>
    </header>
    <div id="dingD"><span class="toRed">*</span>订单号：系统自动生成</div>
<!--   运输地址 -->
    <hr>
    <h3>运输地址</h3>
    <div class="yunBtn">
      <table>
          <tr>
            <th class="toBlue" width="245px"><span class="toRed">*</span>始发地</th>
            <th class="toBlue"><span class="toRed">*</span>目的地</th>
          </tr>
          <!--  两个下拉框-->
          <tr>
            <td>
                <el-select v-model="value" placeholder="下单时间" class="xiaDan">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
            </td>
            <td>
              <el-select v-model="value" placeholder="下单时间" class="xiaDan">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
      </table>
      
      <!--    委托人信息表-->
      <h3>委托人信息</h3>
      <table>
        <tr>
          <th>委托方</th>
          <th>委托人</th>
          <th>联系电话</th>
          <th>提货地址</th>
          <th>提货人</th>
          <th>联系电话</th>
        </tr>
        <tr>
          <td>
            <input type="text" class="input_style"/>
          </td>
          <td>
            <input type="text" class="input_style"/>
          </td>
          <td>
            <input type="text" class="input_style"/>
          </td>
          <td>
            <input type="text" class="input_style"/>
          </td>
          <td>
            <input type="text" class="input_style"/>
          </td>
          <td>
            <input type="text" class="input_style"/>
          </td>
        </tr>
      </table>
      <!--    收货人信息表-->
      <h3>收货人信息</h3>
      <table>
        <tr>
          <th><span class="toRed">*</span>收货方</th>
          <th><span class="toRed">*</span>收货人</th>
          <th><span class="toRed">*</span>联系电话</th>
          <th><span class="toRed">*</span>收货地址</th>
        </tr>
        <tr>
          <td><input type="text" class="input_style"/></td>
          <td><input type="text" class="input_style"/></td>
          <td><input type="text" class="input_style"/></td>
          <td><input type="text" class="input_style"/></td>
        </tr>
      </table>
      <!--    计划时间表-->
      <h3>计划时间</h3>
      <table>
        <tr>
          <th><span class="toRed">*</span>计划装货时间</th>
          <th><span class="toRed">*</span>计划到货时间</th>
        </tr>
        <tr>
          <td>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </td>
          <td>
            <el-date-picker
              v-model="value2"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </td>
        </tr>
      </table>
      <!--    货物信息表-->
      <h3>货物信息</h3>
      <table>
        <tr>
          <th><span class="toRed">*</span>货名</th>
          <th><span class="toRed">*</span>规格型号</th>
          <th><span class="toRed">*</span>总包装</th>
          <th><span class="toRed">*</span>总数量</th>
          <th><span class="toRed">*</span>总重量kg</th>
          <th><span class="toRed">*</span>总体积m³</th>
          <th class="add_tr"><span class="toRed ">*</span>+</th>
        </tr>
        <tr>
          <td><input type="text" class="input_style"/></td>
          <td><input type="text" class="input_style"/></td>
          <td>
            <select class="total_bag">
              <option label="袋" value="1"></option>
              <option label="箱" value="2"></option>
              <option label="个" value="3"></option>
              <option label="台" value="4"></option>
              <option label="卷" value="5"></option>
              <option label="其他" value="6"></option>
            </select>
          </td>
          <td><input type="text" class="input_style"/></td>
          <td><input type="text" class="input_style"/></td>
          <td><input type="text" class="input_style"/></td>
          <td>-</td>
        </tr>
      </table>
      <!--   备注 -->
      <h3>订单备注</h3>
      <el-input class="input" v-model="input" placeholder="请输入内容"></el-input>
      <!--    底部按钮-->
      <div class="btn">
        <el-button type="info" @click="mySubmit">提交</el-button>
        <el-button type="info" @click="back">取消</el-button>
      </div>

    </div>

  </div>
</template>

<script>
export default {
name: "AddOrder",
  data(){
  return {
    options: [{
      value: '选项1',
      label: '收货人'
    }, {
      value: '选项2',
      label: '始发地'
    }, {
      value: '选项3',
      label: '目的地'
    }, {
      value: '选项4',
      label: '订单号'
    }, {
      value: '选项5',
      label: '货名'
    },{
      value: '选项6',
      label: '合同编号'
    }
    ],
    value: '',
    input:'',
    value1: '',
    value2: '',
    tableData: [{
      date: '2016-05-03',
      name: '合计',
      address: '上海市普518 弄'
    }],
  }
  },
  methods:{
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 3];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },
    back(){
      this.$router.push('./checkorder')
    },
    mySubmit(){
      this.$router.push('./checkorder')
    }
  }
}
</script>

<style scoped>
h3,h4{
  text-align: left;
  
}
h3{
  background-color: #99a9bf;
  width: 100px;
  padding: 10px 5px;
  text-align: center;
}
header{
  text-align: left;

}

/* .yunBtn{
  text-align: left;
  
}
.yunBtn button{
  width: 222px;
  height: 40px;
} */
#muDi{
  margin-left:-10px;
}
.btn{
  margin-top:20px;
  height: 40px;
  text-align: center;

}
.btn button{
  width: 100px;
  height: 40px;
}
.input{
  height: 50px;
}
#plan{
  width: 361px;
}
span{
  color: red;
}
.divHeader{
  padding: 5px;
  background: rgb(153,169,191);
  font-size: 25px;
  border-radius: 1px;
}

/* 修改input默认样式 */
.input_style{
  height: 40px;
  border-color: transparent;
  padding: 0;
}
tr{
  height: 40px;
  text-align: center;
}
th{
  border: 0.5px solid #e9eef3;
  background-color: #99a9bf91;
}
td{
  border: 1px solid #e9eef3;
  background-color: #fff;
}
table{
  border: 0;
}
/* 红色小星星 */
.toRed{
  color: red;
}
select{
  height: 40px;
  width: 178px;
  border: none;
}
select:focus{
  height: 40px;
  border: transparent;
}
option{
  height: 28px;
}
.add_tr{
  width: 40px;
}

.tms_top{
  /* background-color: #99a9bf; */
  font-size: 24px;
  margin: 10px 0;
}
.toBlue{
  background-color: #99a9bf91;
  width: 300px;
}
</style>